import React, { useState, useEffect } from 'react';
import { Layout, Menu } from 'antd';
import {
  HomeOutlined,
  FundOutlined,
  CreditCardOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';

const { Sider } = Layout;

interface MainSidebarProps {
  collapsed: boolean;
  onCollapse: (collapsed: boolean) => void;
}

const MainSidebar: React.FC<MainSidebarProps> = ({ collapsed, onCollapse }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const [openKeys, setOpenKeys] = useState<string[]>([]);

  // 初始化展开的菜单基于当前路径
  useEffect(() => {
    const keys: string[] = [];
    if (location.pathname.startsWith('/fund_manage')) {
      keys.push('fund_manage');
    }
    if (location.pathname.startsWith('/card_manage')) {
      keys.push('card_manage');
    }
    setOpenKeys(keys);
  }, [location.pathname]);

  const menuItems = [
    {
      key: '/',
      icon: <HomeOutlined />,
      label: '首页',
    },
    {
      key: 'fund_manage',
      icon: <FundOutlined />,
      label: '资金管理',
      children: [
        {
          key: '/fund_manage/recharge',
          label: '充值记录',
        },
        {
          key: '/fund_manage/details',
          label: '资金明细',
        },
        {
          key: '/fund_manage/withdraw',
          label: '资金提现',
        },
        {
          key: '/fund_manage/audit',
          label: '资金审核',
        },
      ],
    },
    {
      key: 'card_manage',
      icon: <CreditCardOutlined />,
      label: '卡片管理',
      children: [
        {
          key: '/card_manage/list',
          label: '卡片列表',
        },
        {
          key: '/card_manage/holder',
          label: '持卡人管理',
        },
        {
          key: '/card_manage/bin',
          label: '卡bin管理',
        },
        {
          key: '/card_manage/apply',
          label: '卡片申请',
        },
      ],
    },
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    // 只导航到具体页面，不处理一级菜单的点击（用于展开/折叠）
    if (key === '/' || key.startsWith('/fund_manage') || key.startsWith('/card_manage')) {
      navigate(key);
    }
  };

  const handleOpenChange = (keys: string[]) => {
    setOpenKeys(keys);
  };

  // 设置选中的菜单项基于当前路径
  const selectedKeys = [location.pathname];

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={onCollapse}
      width={200}
      className="main-sidebar"
      style={{
        boxShadow: '2px 0 6px rgba(0,21,41,.35)',
        height: '100vh',
        position: 'fixed',
        left: 0,
        top: 0,
        bottom: 0,
        zIndex: 100,
      }}
    >
      <div className="sidebar-header">
        <h1 style={{
          fontSize: collapsed ? 16 : 18,
          margin: 0,
          transition: 'all 0.2s'
        }}>
          {collapsed ? 'CMS' : '卡片管理系统'}
        </h1>
      </div>
      <Menu
        mode="inline"
        selectedKeys={selectedKeys}
        openKeys={openKeys}
        onClick={handleMenuClick}
        onOpenChange={handleOpenChange}
        className="sidebar-menu"
        style={{
          borderRight: 0,
          marginTop: 16,
        }}
        items={menuItems}
      />
    </Sider>
  );
};

export default MainSidebar;
